<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <el-form
      ref="searchForm"
      label-position="left"
      :model="params"
    >
      <el-form-item label="司机账号">
        <el-input
          v-model="params.account"
          placeholder="请输入司机账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="司机姓名">
        <el-input
          v-model="params.name"
          placeholder="请输入司机姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="司机手机号">
        <el-input
          v-model="params.phone"
          placeholder="请输入司机手机号"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="所属机构"
      >

        <treeselect
          v-model="params.agentId"
          :options="options"
          placeholder="请选择所属机构"
        >
          <template
            slot="option-label"
            slot-scope="{ node }"
          >{{ node.raw.name }}</template>
        </treeselect>
      </el-form-item>
      <el-button
        type="primary"
        class="search"
        @click="searchList"
      >搜索</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form>
    <el-dialog
      title="车辆配置"
      :visible.sync="dialogVisible"
      width="30%"
      @close="dialogVisible=false"
    >
      <p>配置车辆需满足以下条件</p>
      <span>①司机信息已完善</span>
      <span>②司机已设置排班</span>
      <span>③司机绑定车辆未在启用状态</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogUse"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="配置车辆"
      :visible.sync="dialogCar"
      width="30%"
    >
      <div class="driver-car">
        <i>司机编号</i><b>{{ carForm.userId }}</b>
        <i>司机名称</i><b>{{ carForm.name }}</b>
        <i>司机电话</i><b>{{ carForm.mobile }}</b>
        <i>所属机构</i><b>{{ carForm.agency.name }}</b>
      </div>
      <b>配置车辆:</b>
      <el-select
        v-model="carData.truckId"
        @change="theCarchange(carData.truckId)"
      >
        <el-option
          v-for="item in carList"
          :key="item.id"
          :value="item.id"
          :label="item.licensePlate"
        >{{ item.licensePlate }}</el-option>
      </el-select>
      <el-table :data="theCar">
        <el-table-column
          label="车牌号"
          prop="licensePlate"
        >
        </el-table-column>
        <el-table-column
          label="车辆状态"
          prop="workStatus"
        >
          {{ workStatus===0?'停用':'启用' }}
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <span @click="$router.push({path:'vehicle-detail',query:{id:scope.row.id}})">查看</span> |
            <span
              style="color:red;"
              @click="theCar=[]"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitCar"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-table
      stripe
      :loading="loading"
      :data="driverTabel"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="account"
        label="司机账号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="司机姓名"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="司机电话"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="truck.licensePlate"
        label="关联车辆"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="agency.name"
        label="所属机构"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="workStatus"
        label="工作状态"
        width="180"
      >
        <template #default="{row}">{{ workStatus(row.workStatus) }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="300"
        fixed="right"
      >
        <template #default="scope">
          <span
            @click="$router.push(`driver-detail/${scope.row.userId}`)"
          >查看</span>|<span @click="carUse(scope.row)">配置车辆</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import { agencyTree, driverList, carList, driverArrangeCar } from '@/api/transit'
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Courses',
  components: { Treeselect },
  data() {
    return {
      dialogVisible: false,
      dialogCar: false,
      options: [],
      loading: false,
      total: 0,
      driverTabel: [],
      theCar: [],
      carForm: {
        agency: {},
        truck: {}
      },
      carData: {
        driverIds: [],
        truckId: ''
      },
      carList: [],
      params: {
        page: 1,
        pageSize: 10,
        account: '',
        agentId: null,
        name: '',
        phone: '',
        workStatus: ''
      }
    }
  },
  async mounted() {
    this.driverListGet()
    const ele = await agencyTree()
    this.options = JSON.parse(ele.data)
    console.log(this.options)
  },

  methods: {
    async submitCar() {
      const res = await driverArrangeCar(this.carData)
      console.log(res)
      this.dialogCar = false
      this.$message.error(res.msg)
    },
    async driverListGet() {
      const res = await driverList(this.params)
      console.log(res)
      this.driverTabel = res.data.items
      this.total = Number(res.data.counts)
    },
    handleCurrentChange(val) {
      this.loading = true
      this.params.page = val
      this.driverListGet()
      this.loading = false
    },
    async searchList() {
      await this.driverListGet()
    },
    async resetForm() {
      this.params = {
        page: 1,
        pageSize: 10,
        account: '',
        agentId: null,
        name: '',
        phone: '',
        workStatus: ''
      }
      await this.driverListGet()
    },
    workStatus(key) {
      const MAP_WORK = {
        0: '休息',
        1: '上班'
      }
      return MAP_WORK[key]
    },
    async carUse(val) {
      this.dialogVisible = true
      this.carForm = val
      this.carData.driverIds.push(val.userId)
      this.carData.truckId = val.truck.id
      const res = await carList({ page: 1, pageSize: 500 })
      this.carList = res.data.items
      this.theCar.push(this.carList.find(item => item.id === val.truck.id))
      console.log(res.data.items)
    },
    dialogUse() {
      this.dialogVisible = false
      this.dialogCar = true
    },
    theCarchange(id) {
      this.theCar = []
      this.theCar.push(this.carList.find(item => item.id === id))
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
::v-deep  .el-select {
  width: 100%;
}

::v-deep  .el-card{
  overflow: initial;
}

.driver{
  height: 1000px;
  text-align: center;
.el-form{
  margin: 0px 30px 30px 30px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  .el-form-item{
    width: 30%;
    margin-right: 45px;
    display: flex;
  }
  .el-button{
    width: 130px;
    height: 50px;
  }
  .search{
    background-color: orangered;
    border: orangered;
  }
}
}
.driver-car{
  background-color: #f1f1f1;
}
.el-table{
  margin: 0 30px;
  .el-table-column{
    .el-table-column:last-child{

    }
  }
}
  span{
    font-size: 16px;
  color: rgb(45, 147, 242);
  margin: 0 20px;

}

</style>

